<template>
	<el-main>
		<el-card shadow="never" header="分步表单">
			<el-steps :active="active" align-center style="margin-bottom: 20px">
				<el-step title="填写转账信息"></el-step>
				<el-step title="确认转账信息"></el-step>
				<el-step title="完成"></el-step>
			</el-steps>
			<el-row>
				<el-col :lg="{ span: 8, offset: 8 }">
					<el-form v-if="active === 0" ref="stepForm_0" :model="form" :rules="rules" label-position="top">
						<el-form-item label="付款账户" prop="paymentAccount">
							<el-select v-model="form.paymentAccount" clearable>
								<el-option label="sakuya@scui.com" value="sakuya@scui.com"></el-option>
								<el-option label="lolicode@scui.com" value="lolicode@scui.com"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="收款账户" prop="collectionAccount">
							<el-input v-model="form.collectionAccount" clearable></el-input>
						</el-form-item>
						<el-form-item label="收款人姓名" prop="collectionName">
							<el-input v-model="form.collectionName" clearable></el-input>
						</el-form-item>
						<el-form-item label="转账金额" prop="amount">
							<el-input v-model="form.amount"></el-input>
						</el-form-item>
					</el-form>
					<el-form v-if="active === 1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
						<el-alert
							title="确认转账后，资金将直接打入对方账户，无法退回。"
							type="warning"
							show-icon
							style="margin-bottom: 15px"
						/>
						<el-descriptions :column="1" border>
							<el-descriptions-item label="付款账户">{{ form.paymentAccount }}</el-descriptions-item>
							<el-descriptions-item label="收款账户">{{ form.collectionAccount }}</el-descriptions-item>
							<el-descriptions-item label="收款人姓名">{{ form.collectionName }}</el-descriptions-item>
							<el-descriptions-item label="转账金额">{{ form.amount }} 元</el-descriptions-item>
						</el-descriptions>
						<el-divider></el-divider>
						<el-form-item label="支付密码" prop="payPassword">
							<el-input v-model="form.payPassword" show-password placeholder="请输入"></el-input>
						</el-form-item>
					</el-form>
					<div v-if="active === 2">
						<el-result icon="success" title="操作成功" sub-title="预计两小时内到账">
							<template #extra>
								<el-button type="primary" @click="again">再转一笔</el-button>
								<el-button>查看账单</el-button>
							</template>
						</el-result>
					</div>
					<el-button v-if="active > 0 && active < 2" :disabled="submitLoading" @click="pre">上一步</el-button>
					<el-button v-if="active < 1" type="primary" @click="next">下一步</el-button>
					<el-button v-if="active === 1" type="primary" :loading="submitLoading" @click="submit">提交</el-button>
				</el-col>
			</el-row>
		</el-card>
	</el-main>
</template>

<script>
export default {
	name: 'stepform',
	data() {
		return {
			active: 0,
			submitLoading: false,
			form: {
				paymentAccount: 'lolicode@scui.com',
				collectionAccount: 'test@example.com',
				collectionName: 'Lolowan',
				amount: '100',
				payPassword: ''
			},
			rules: {
				paymentAccount: [
					{
						required: true,
						message: '请选择付款账户'
					}
				],
				collectionAccount: [
					{
						required: true,
						message: '请输入收款账户'
					}
				],
				collectionName: [
					{
						required: true,
						message: '请输入收款人姓名'
					}
				],
				amount: [
					{
						required: true,
						message: '请输入转账金额'
					}
				],
				payPassword: [
					{
						required: true,
						message: '需要支付密码才能进行支付'
					}
				]
			}
		}
	},
	mounted() {},
	methods: {
		//下一步
		next() {
			const formName = `stepForm_${this.active}`
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.active += 1
				} else {
					return false
				}
			})
		},
		//上一步
		pre() {
			this.active -= 1
		},
		//提交
		submit() {
			const formName = `stepForm_${this.active}`
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.submitLoading = true
					setTimeout(() => {
						this.submitLoading = false
						this.active += 1
					}, 1000)
				} else {
					return false
				}
			})
		},
		//再来一次
		again() {
			this.active = 0
		}
	}
}
</script>

<style scoped>
.el-steps:deep(.is-finish) .el-step__line {
	background: var(--el-color-primary);
}
</style>
